<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>文件上传</title>
  <script src="/js/jquery-3.1.1.min.js"></script>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

  <!-- 引入组件库 -->
  <script src="/js/vue.min.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <style>
    .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
      border-color: #409EFF;
    }
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      line-height: 178px;
      text-align: center;
    }
    .avatar {
      width: 500px;
      height: 178px;
      display: block;
    }
  </style>
</head>
<body>
<div id="app">
  <el-container>
    <el-header>
      <h2>修改头像</h2>
    </el-header>
    <el-main>
      <!--
      action="/upload" :服务端文件上传地址
      :on-success="handleSuccess" 文件上传成功执行函数
       :on-error="handleError" 文件上传失败执行函数
        drag 支持拖拽文件上传
        multiple 支持多文件上传
        :show-file-list="false" 是否显示文件上传列表
      -->
      <el-upload
              class="avatar-uploader"
              action="/employee/uploadFile"
              :on-success="handleSuccess"
              :on-error="handleError"
              drag
              multiple
              :show-file-list="false"
      >
        <img v-if="imageUrl" :src="imageUrl" class="avatar" >
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>

    </el-main>
  </el-container>

  <!--  <video :src="videoSrc" width="320" height="240" controls>-->
  <!--    <source :src="videoSrc" type="video/mp4">-->
  </video>
</div>


<script>
  new Vue({
    el: '#app',
    data:{
      imageUrl:"",//图片地址
      videoSrc:""
    },
    methods: {
      handleSuccess(response, file, fileList) {
        console.log(response);
        if(response.data.type=="video"){
          this.videoSrc = response.data.src;
        }
        if(response.data.type=="image"){
          this.imageUrl = response.data.src;
          parent.index.circleUrl = response.data.src;
        }
        //更改图片地址
        this.$message.success('上传成功');
      },
      handleError(err, file, fileList) {
        this.$message.error('上传失败');
      }
    }
  });
</script>
</body>
</html>
